<template>
	<div>
		<el-form :inline="true" :model="conditionForm" ref="conditionForm" label-width="120px">
			<el-form-item label="数据源编码：">
				<el-input v-model="conditionForm.sysCode"></el-input>
			</el-form-item>
			<el-form-item label="数据源名称：">
				<el-input v-model="conditionForm.sysName"></el-input>
			</el-form-item>
			<el-button type="primary" @click="queryData">查询</el-button>
		</el-form>

		<div class="">
			<el-button type="primary" icon="plus" @click="add">新增</el-button>
			<el-button type="primary" icon="edit">修改</el-button>
			<el-button type="primary" icon="delete">删除</el-button>		
		</div>
		
		</br>
		<el-table :data="tableData" border style="width: 100%" highlight-current-row>
			<el-table-column width="50" inline-template>
				<label class="radio">
					<input type="radio" value="2" name="radio" :data-index="$index">
					<span class="dot"></span>
				</label>
			</el-table-column>
			<el-table-column prop="sysCode" label="数据源编码" >
			</el-table-column>
			<el-table-column prop="sysName" label="数据源名称" >
			</el-table-column>
			<el-table-column prop="dbType" label="数据库类型">
			</el-table-column>
			<el-table-column prop="crtTm" label="创建时间" >
			</el-table-column>
			<el-table-column prop="updTm" label="修改时间" >
			</el-table-column>
		</el-table>

		<el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="1" :page-sizes="[10,20, 50, 100]" :page-size="pageSize" layout="->,prev, pager, next, jumper, sizes,total" :total="totalSize">
		</el-pagination>

		
		<!--新增和修改-->
		<el-dialog title="新增数据源" v-model="addAndModify" size="tiny">
		  <el-form :model="configform" ref="configform">
			<el-form-item label="数据源编码">
				<el-input style="width:200px" v-model="configform.sysCode" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="数据源名称">
				<el-input style="width:200px" v-model="configform.sysName" auto-complete="off"></el-input>
			</el-form-item>
			
			<el-form-item label="数据源类型">
			  <el-select style="width:200px" v-model="configform.dbType" placeholder="请选择">
				<el-option label="mysql" value="mysql"></el-option>
				<el-option label="oracle" value="oracle"></el-option>
			  </el-select>
			</el-form-item>
			
			<el-form-item label="URL" style="padding-left:40px">
				<el-input style="width:200px" v-model="configform.url" auto-complete="off"  placeholder="IP:PORT/DBNAME"></el-input>
			</el-form-item>
			<el-form-item label="用户" style="padding-left:40px">
				<el-input style="width:200px" v-model="configform.dbUser" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="密码" style="padding-left:40px">
				<el-input style="width:200px" v-model="configform.dbPwd" type="password" auto-complete="off"></el-input>
			</el-form-item>
			
		  </el-form>
		  <div slot="footer" class="dialog-footer">
			<el-button @click="cancel">取 消</el-button>
			<el-button @click="save" type="primary">确 定</el-button>
		  </div>
		</el-dialog>
		
	</div>
</template>




<script>
	import {
		Message
	} from 'element-ui';
	import {
		Notification
	} from 'element-ui';
	
	
	export default {
		data() {
			return {
				configform: {
					sysCode: '',
					sysName: '',
					dbType: '',
					url: '',
					dbUser: '',
					dbPwd: ''
				},
				conditionForm: {
					sysCode: '',
					sysName: ''
				},
				tableData: [],
				pageSize: 20,
				totalSize: 0,
				addAndModify:false,
			}
		},
		methods: {
			getPageData(param) {
				debugger
				if(!param || param == {}) {
					var param = {}
				}
				if(!param.hasOwnProperty("pageSize")) {
					param.pageSize = this.pageSize
				}
				if(!param.hasOwnProperty("start")) {
					param.start = 0
				}
				this.$httpExt().post('dbConfig/dbConfigData',
						param
					)
					.then((response) => {debugger
						var body = response.result
						this.totalSize = body.totalSize
						var data = body.rows
						this.tableData = data
					}, (response) => {
						Notification.error({
							title: '异常',
							message: response.msg
						})
					});
			},
			queryData() {
				this.getPageData(this.conditionForm)
			},
			sizeChange(val) {
				var param = {
					pageSize: val
				}
				this.getPageData(param)
			},
			currentChange(val) {
				var start = (val - 1) * this.pageSize
				var param = {
					start: start
				}
				this.getPageData(param)
			},
			add() {
				this.title = '新增数据源'
				this.addAndModify = true
				this.configform.sysCode = ''
				this.configform.sysCode = ''
				this.configform.sysName= ''
				this.configform.dbType= ''
				this.configform.url= ''
				this.configform.dbUser= ''
				this.configform.dbPwd= ''
			},
			cancel() {
				this.addAndModify = false
			},
			save(){
				this.$httpExt().post('dbConfig/save',
					this.configform
				).then((response) => {						
					if(response.succ='OK'){
						Message({
							message: '保存成功！',
							type: 'success'
						});
						this.queryData();
					}else{
						Message({
							message: response.msg,
							type: 'warning'
						});
					}
				}, (response) => {
					Notification.error({
						title: '异常',
						message: response.msg
					})
				});
			}
		},
		mounted() {
			this.getPageData()
		}
	}



</script>

